import Vue from 'vue'
import VueRouter from 'vue-router'

// 使用路由插件
Vue.use(VueRouter)


// 引入store
import store from '@/store'

// 捕获push replace中的错误
// 当然在replace中的错误也是可以相同的进行捕获
const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace
// push【重写VueRouter.prototype身上的push方法】
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}
// replace【重写VueRouter.prototype身上的replace方法】
VueRouter.prototype.replace = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
  return originalReplace.call(this, location).catch(err => err)
}




// 引入一级路由组件
// import Home from '@/pages/Home'
const Home = () => import('@/pages/Home') // 路由懒加载

// import Search from '@/pages/Search'
const Search = () => import('@/pages/Search')

// import Login from '@/pages/Login'
const Login = () => import('@/pages/Login')

// import Register from '@/pages/Register'
const Register = () => import('@/pages/Register')

// import Detail from '@/pages/Detail'
const Detail = () => import('@/pages/Detail')

// import AddCartSuccess from '@/pages/AddCartSuccess'
const AddCartSuccess = () => import('@/pages/AddCartSuccess')

// import ShopCart from '@/pages/ShopCart'
const ShopCart = () => import('@/pages/ShopCart')

// import Trade from '@/pages/Trade'
const Trade = () => import('@/pages/Trade')

// import Pay from '@/pages/Pay'
const Pay = () => import('@/pages/Pay'
)
// import PaySuccess from '@/pages/PaySuccess'
const PaySuccess = () => import('@/pages/PaySuccess')

// import Center from '@/pages/Center'
const Center = () => import('@/pages/Center')
// 引入二级路由组件
// import myOrder from '@/pages/Center/myOrder'
const myOrder = () => import('@/pages/Center/myOrder')

// import groupOrder from '@/pages/Center/groupOrder'
const groupOrder = () => import('@/pages/Center/groupOrder')
// 配置路由
const routes = [
  {
    path: "/",
    redirect: "/home"   // 当路径为“/”时，路由重定向到 home页面
  },
  {
    path: "/home",
    component: Home,
    meta: { show: true }
  },
  {
    path: "/detail/:skuid",
    component: Detail,
    meta: { show: true }
  },
  {
    path: "/addcartsuccess",
    component: AddCartSuccess,
    meta: { show: true },
    name: 'addcartsuccess'
  },
  {
    path: "/search/:keyword?",
    component: Search,
    meta: { show: true },
    name: "search"
  },
  {
    path: "/login",
    component: Login,
    meta: { show: false }
  },
  {
    path: "/register",
    component: Register,
    meta: { show: false }
  },
  {
    path: "/shopcart",
    component: ShopCart,
    meta: { show: true },
    name: 'shopcart'
  },
  {
    path: "/trade",
    component: Trade,
    meta: { show: true },
    name: 'trade',
    // 路由独享守卫
    beforeEnter: (to, from, next) => {
      // 去交易页面必须从购物车而来
      if (from.path == "/shopcart") {
        next()
      } else {
        // 其他的路由组件而来，停留在当前页面
        next(false)
      }
    }
  },
  {
    path: "/pay",
    component: Pay,
    meta: { show: true },
    name: 'pay',
    // 路由独享守卫
    beforeEnter: (to, from, next) => {
      // 去支付页面必须从交易页面来
      if (from.path == "/trade") {
        next()
      } else {
        // 其他的路由组件而来，停留在当前页面
        next(false)
      }
    }
  },
  {
    path: "/paysuccess",
    component: PaySuccess,
    meta: { show: true },
    name: 'paysuccess',
    // 路由独享守卫
    beforeEnter: (to, from, next) => {
      // 去支付成功页面必须从支付页面来
      if (from.path == "/pay") {
        next()
      } else {
        // 其他的路由组件而来，停留在当前页面
        next(false)
      }
    }
  },
  {
    path: "/center",
    component: Center,
    meta: { show: true },
    // 二级路由组件
    children: [
      {
        // 进入我的订单页面若路径为 /center --->则重定向到 /myorder【让订单页面的右侧内容一开始就显示我的订单】
        path: '/center',
        redirect: '/center/myorder'
      },
      {
        // 子路由上不用加“/” --->以“/”开头的嵌套路径会被当成根路径，所以不用加“/” 
        path: 'myorder',
        component: myOrder,
      },
      {
        path: 'grouporder',
        component: groupOrder
      }
    ]
  }
]

const router = new VueRouter({
  routes,
  // 滚动行为：
  // y = 0：表示滚动条在最上方
  scrollBehavior(to, from, savedPosition) {
    return { y: 0 }
  }
})

// 全局守卫：前置守卫（在路由跳转之间进行判断）
router.beforeEach(async (to, from, next) => {
  // to：即将要进入的目标【跳转到哪个路由】
  // from：即将要离开的目标【从哪个路由离开】
  // next：放行函数

  // 用户登录才有token -->未登录一定不会有token
  let token = store.state.user.token
  // 用户名
  let userName = store.state.user.userInfo.name
  // 已登录
  if (token) {
    // 要去Login || Register页面  ---->休想
    if (to.path == "/login" || to.path == "/register") {
      // 留在home首页【放行到home首页】
      next('/')
    } else {
      // 去的不是Login页面
      if (userName) {
        // 用户名存在 --->放行
        next()
      } else {
        // 用户名不存在 --->派发action让仓库存储信息，再放行
        try {
          // 获取用户信息成功 
          await store.dispatch('getUserInfo')
          next()
        } catch (error) {
          // token失效了，获取不到用户信息，从新登录
          // 清除token【派发action -->退出登录 --->再放行到Login页面 ---> 可以进行从新登录】
          await store.dispatch('logOut')
          next('/login')
        }
      }
    }
  }
  // 未登录
  else {
    // 未登录：不能去交易相关、不能去支付相关【pay|paysuccess】、不能去个人中心
    // 未登录去上面这些路由 --->跳转到Login页面
    let toPath = to.path
    if (toPath.indexOf('/trade') != -1 || toPath.indexOf('pay') != -1 || toPath.indexOf('center') != -1) {
      // 把未登录的时候想去而没有去成的信息，存储与地址栏中【路由】
      next('/login?redirect=' + toPath)
    } else {
      // 去的不是上面这些路由 --->放行
      next()
    }
  }
})


// 对外暴露VueRouter类的实例
export default router
